<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		     .html()     无参---功能：获取匹配元素中第一个元素内容
			             有参---功能：【设置】将匹配的元素集合当中的所有元素替换为新元素
			特点： 针对 内容  +  元素
			 .val()      无参---功能：表单内元素：input、select生效
			                         获取表单元素中第一个元素内容
			             有参---功能：表单内元素：input、select生效
			                        input元素直接显示  value
			                        select元素不是直接显示
									option元素中内容：用户显示
									option 元素中value值，
									必须当前select中，option元素value值
									必须赋值：打印delect元素对象名称[object Object]
			特点：针对  表单 (表单内form元素可以包裹)元素的内容
			 .text()           无参---功能:获取匹配元素集合中所有元素的文本内容
			                   有参---功能: 【设置】匹配元素集合中所有元素的文本内容替换
			特点：元素中存在文本
			html()和val()和text()区别联系？？？？
			都操作元素以及内容部分，html文本，val表单内元素【input可以】
			html可以放元素和内容，text只能元素中文本
			val表单内value值有效
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button>按钮-针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
	    <button>按钮-针对val()函数-无参</button>
	    <input type="text" value="文本框真实的数据"/>
		<input type="text" placeholder="输入框显示效果[提示]"/>
		<!-- html：按钮 | 下拉列表 select>option*3 需要加value() -->
		<!-- jq: 点击按钮，设置下拉列表的值  | html()与val()有参是否存在区别 -->
		<button>按钮-针对val()函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<script>
		//1.找到 类目为  btn1  的按钮--点击--弹窗内容为 三个 p元素内容【无参】
		$('.btn1').click(function(){
			var ptext=$('p').text();
			alert(ptext);
		});
		$('.btn2').click(function(){
			$('p').text("修改文本");
		
		});
		//2.找到 类目为  btn2  的按钮--点击--lorem4/5/6 改成 “修改文本”【有参】
			
			//$('button').click(function(){
			//设置元素第一个值   1.直接设置下拉列表中value的值
			  // $("select").val("rem1");
			//设置元素第一个值   2.给第一个值添加设置好的内容【只允许select默认存在的：如rem1】
			//var rem=$('select').val();
			
			//[object Object] JavaScript中 对象的默认字符串表示形态
			//select元素 对象 输出[object Object]
			
			//value的值：真实数据 option中值：显示数据
			//object Object  测试：无参
			//alert("val()函数有参："+rem);
			//});
			
			
			//动态效果：点击按钮，获取第一个表单元素内容
			/* $('button').click(function(){
				/* 注意：js变量名不可以为关键字  in关键字 */
				//var ins=$('input').val();
				//alert("val()函数无参："+ins);
		//	}); */
			
			//有参：点击按钮--下面两个span  改成lorem
		/* 	$('button').click(function(){
				$('span').html("lorem")
			}); */
			
			//js变量【var i=1】==jq变量   var变量名=值、元素
			//无参数  html()函数使用
			//var html=$('span').html();
			//BOM方式  打印数据
			//alert("无参数获取第一个元素内容："+html)
		</script>
	</body>
</html>